import React from 'react'
import { Row, Col, Card, Statistic, Progress, Table, Space, Tag, Button } from 'antd'
import { 
  ArrowUpOutlined, 
  SyncOutlined,
  PlayCircleOutlined,
  StopOutlined,
} from '@ant-design/icons'
import { useQuery } from 'react-query'
import { shardTaskApi } from '../services/shardTask'

const Dashboard: React.FC = () => {

  // 获取集群节点信息
  const { data: clusterNodes, isLoading: clusterLoading } = useQuery(
    'clusterNodes',
    shardTaskApi.getClusterNodes,
    { refetchInterval: 10000 }
  )

  // 最近执行记录表格列定义
  const executionColumns = [
    {
      title: '处理器名称',
      dataIndex: 'handler_name',
      key: 'handler_name',
      render: (text: string) => {
        const displayName = text.replace('demo_', '').replace(/_/g, ' ')
        return <Tag color="blue">{displayName}</Tag>
      },
    },
    {
      title: '执行状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const statusConfig = {
          SUCCESS: { color: 'green', text: '成功' },
          FAILED: { color: 'red', text: '失败' },
          RUNNING: { color: 'blue', text: '运行中' },
          PENDING: { color: 'orange', text: '等待中' },
        }
        const config = statusConfig[status as keyof typeof statusConfig] || { color: 'default', text: status }
        return <Tag color={config.color}>{config.text}</Tag>
      },
    },
    {
      title: '分片参数',
      dataIndex: 'shard_param',
      key: 'shard_param',
      render: (param: string) => param || '-',
    },
    {
      title: '触发时间',
      dataIndex: 'trigger_time',
      key: 'trigger_time',
      render: (time: string) => time ? new Date(time).toLocaleString() : '-',
    },
    {
      title: '操作',
      key: 'action',
      render: () => (
        <Space size="small">
          <Button size="small" icon={<SyncOutlined />}>重试</Button>
          <Button size="small" icon={<StopOutlined />}>停止</Button>
        </Space>
      ),
    },
  ]

  // 集群节点表格列定义
  const nodeColumns = [
    {
      title: '节点ID',
      dataIndex: 'node_id',
      key: 'node_id',
      render: (text: string) => <Tag color="purple">{text}</Tag>,
    },
    {
      title: '活跃分片',
      dataIndex: 'active_shards',
      key: 'active_shards',
      render: (count: number) => (
        <span>
          <span className="status-indicator status-processing"></span>
          {count}
        </span>
      ),
    },
    {
      title: '处理任务',
      dataIndex: 'processing_jobs',
      key: 'processing_jobs',
      render: (jobs: string[]) => (
        <Space>
          {jobs.slice(0, 2).map(job => (
            <Tag key={job}>{job.substring(0, 8)}...</Tag>
          ))}
          {jobs.length > 2 && <span>+{jobs.length - 2}</span>}
        </Space>
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <Tag color={status === 'active' ? 'green' : 'red'}>
          {status === 'active' ? '在线' : '离线'}
        </Tag>
      ),
    },
  ]

  return (
    <div>
      <h1 style={{ marginBottom: 24, fontSize: 24, fontWeight: 'bold' }}>
        分片集群管理仪表盘
      </h1>
      
      {/* 统计卡片 */}
      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="活跃集群节点"
              value={clusterNodes?.total_nodes || 0}
              prefix={<ArrowUpOutlined />}
              valueStyle={{ color: '#1890ff' }}
              loading={clusterLoading}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="运行中分片"
              value={clusterNodes?.total_active_shards || 0}
              prefix={<SyncOutlined spin />}
              valueStyle={{ color: '#722ed1' }}
              loading={clusterLoading}
            />
          </Card>
        </Col>
      </Row>
    </div>
  )
}

export default Dashboard